<template>
  <div class="indexContainer">
    <!-- p 标签 -->
    <p class="msg">大数据，大时代</p>
    <!-- a + img 标签 -->
    <a href="/pages/index/main">
      <img
        src="https://bpic.588ku.com//back_origin_min_pic/19/07/03/7a0abec28294daffed03c9087c9ea800.jpg"
        alt=""
        mode="widthFix"
        class="bg"
      >
    </a>
    <!-- swiper + swiper-item + img标签 + v-if + v-for -->
    <swiper
      class="swiper"
      :indicator-dots="true"
      v-if="bannerShow"
    >
      <swiper-item v-for="item in bannerList" :key="item.id">
        <img
          :src="item.imgUrl"
          alt=""
          mode="aspectFill"
        >
      </swiper-item>
    </swiper>
    <!-- button 标签 + click事件 -->
    <button class="btn-swiper" @click="swiperShowHandle">关闭广告</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      bannerList: [{
        id: 1,
        imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564464469982&di=a479af86deca2e02fe07e30f700ff212&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201312%2F06%2F211410sxjtbyaj9abo5qzh.jpg'
      }, {
        id: 2,
        imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564464455298&di=6df190154912a63ddee4ebb529548ab0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201210%2F24%2F20121024114700_5JveU.jpeg'
      }, {
        id: 3,
        imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564464434795&di=4893a20ca116cd92cd30d5ae5e7f1d9c&imgtype=0&src=http%3A%2F%2Fimg1.ph.126.net%2FfErWeF4yNUqiGETNYUC5zg%3D%3D%2F1321525015673895373.jpg'
      }, {
        id: 4,
        imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564464504787&di=0446a1dcfbeba56f53760801b7b2ab4b&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1305%2F16%2Fc4%2F20990657_1368686545119.jpg'
      }],
      bannerShow: true
    }
  },

  methods: {
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    },
    clickHandle (ev) {
      console.log('clickHandle:', ev)
      // throw {message: 'custom test'}
    },
    swiperShowHandle () {
      this.bannerShow = !this.bannerShow
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
  .indexContainer {
    padding-top: 0.8rem;
  }
  p.msg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    font-size: 0.4rem;
    text-align: center;
    color: #fff;
    background: orange;
    line-height: 0.8rem;
    height: 0.8rem;
  }
  img.bg {
    display: block;
  }
  .swiper {
    height: 5rem;
  }
  .btn-swiper {
    margin: 0.24rem;
    border-radius: 0.16rem;
    background: orange;
    color: #fff;
    border-color: orange;
  }
</style>
